<template>
  <div>
    <van-nav-bar title="消息中心" left-arrow right-text="排序" @click-left="$router.go(-1)"></van-nav-bar>
    <!-- Tab -->
    <van-tabs route v-model="activeName" color="orange" @click="messageClick">
      <van-tab title="全部消息" name="messageAll"></van-tab>
      <van-tab title="系统消息" name="messageSystem"></van-tab>
      <van-tab title="个人消息" name="messagepersonal"></van-tab>
    </van-tabs>
    <MessageAll v-if="isShowMessage == 'messageAll'" />
    <MessageSystem v-if="isShowMessage == 'messageSystem'" />
    <MessagePersonal v-if="isShowMessage == 'messagepersonal'" />
  </div>
</template>

<script>
import MessageAll from "@/components/MessageAll";
import MessageSystem from "@/components/MessageSystem";
import MessagePersonal from "@/components/MessagePersonal";
export default {
  data() {
    return {
      activeName: "messageAll",
      isShowMessage: "messageAll",
    };
  },
  components: {
    MessageAll,
    MessageSystem,
    MessagePersonal,
  },
  methods: {
    messageClick(name, title) {
      this.isShowMessage = name;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-nav-bar {
  background-color: rgb(6, 6, 139);
  /deep/.van-nav-bar__title,
  /deep/.van-icon,
  /deep/.van-nav-bar__text {
    color: #fff;
  }
}
/deep/.van-tab--active {
  color: blue;
}
</style>